---
layout: example.html
title: Reprojection with coordinate system search
shortdesc: Demonstrates client-side raster reprojection of OSM to arbitrary projection
docs: >
  This example shows client-side raster reprojection capabilities from
  OSM (EPSG:3857) to arbitrary projection by searching
  in <a href="https://docs.maptiler.com/cloud/api/coordinates/">MapTiler Cloud Coordinates API</a>.
  **Note**: Make sure to get your own API key at https://www.maptiler.com/cloud/ when using this example.
tags: "reprojection, projection, proj4js, epsg, maptiler, graticule"
resources:
  - https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css
cloak:
  - key: get_your_own_D6rA4zTHduk6KOKTXzGB
    value: Get your own API key at https://www.maptiler.com/cloud/
---
<div id="map" class="map"></div>
<form class="row">
  <span class="col-auto">
    <span class="input-group">
      <label class="input-group-text" for="epsg-query">Search projection:&nbsp</label>
      <input type="text" id="epsg-query" placeholder="4326, 27700, 3031, US National Atlas, Swiss, France, ..." class="form-control" size="50" />
      <button class="btn btn-outline-secondary" id="epsg-search">Search</button>
    </span>
  </span>
  <span class="mt-2" id="epsg-result">&nbsp;</span>
</form>
<form>
  <div class="form-check mt-2">
    <input class="form-check-input" type="checkbox" id="render-edges" />
    <label class="form-check-label" for="render-edges">Render reprojection edges</label><br>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="checkbox" id="show-tiles" />
    <label class="form-check-label" for="show-tiles">Show tile coordinates</label><br>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="checkbox" id="show-graticule" />
    <label class="form-check-label" for="show-graticule">Show graticule</label>
  </div>
</form>
